<template>
  <div class="consult-detail-page" v-if="orderDetail">
    <cp-nav-bar title="问诊详情" />
    <div class="detail-head">
      <div class="text">
        <h3>图文问诊 {{ orderDetail.payment }} 元</h3>
        <span class="sta green">{{
          btnOptions.find((item) => item.val === orderDetail?.status)?.name
        }}</span>
        <p class="tip">服务医生信息</p>
      </div>
      <div class="card">
        <img class="avatar" src="@/assets/avatar-doctor.svg" alt="" />
        <p class="doc">
          <span>极速问诊</span>
          <span>自动分配医生</span>
        </p>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="detail-patient">
      <van-cell-group :border="false">
        <van-cell
          title="患者信息"
          :value="`${orderDetail.patientInfo.name} | ${orderDetail.patientInfo.genderValue} | ${orderDetail.patientInfo.age}岁`"
        />
        <van-cell title="患病时长" value="一周内" />
        <van-cell
          title="就诊情况"
          :value="orderDetail.consultFlag == 1 ? '没就诊过' : '就诊过'"
        />
        <van-cell title="病情描述" :label="orderDetail.illnessDesc" />
      </van-cell-group>
    </div>
    <div class="detail-order">
      <h3>订单信息</h3>
      <van-cell-group :border="false">
        <van-cell title="订单编号">
          <template #value>
            <span class="copy" @click="onCopy">复制</span>
            {{ orderDetail.orderNo }}
          </template>
        </van-cell>
        <van-cell title="创建时间" value="2022-01-23 09:23:46" />
        <van-cell title="应付款" :value="`￥${orderDetail.payment}`" />
        <van-cell title="优惠券" :value="`-￥${orderDetail.couponDeduction}`" />
        <van-cell
          title="积分抵扣"
          :value="`-￥${orderDetail.pointDeduction}`"
        />
        <van-cell
          title="实付款"
          :value="`￥${orderDetail.actualPayment}`"
          class="price"
        />
      </van-cell-group>
    </div>
    <div class="detail-time" v-if="orderDetail.status === OrderType.ConsultPay">
      请在
      <van-count-down :time="orderDetail.countdown * 1000" />
      内完成支付，超时订单将取消
    </div>
    <div
      class="detail-action van-hairline--top"
      v-if="orderDetail.status === OrderType.ConsultPay"
    >
      <div class="price">
        <span>需付款</span>
        <span>￥39.00</span>
      </div>
      <van-button type="default" round @click="cancelConsultOrder(orderDetail)"
        >取消问诊</van-button
      >
      <van-button type="primary" round @click="show = true"
        >继续支付</van-button
      >
    </div>
    <div
      class="detail-action van-hairline--top"
      v-if="orderDetail.status === OrderType.ConsultWait"
    >
      <div class="price"></div>
      <van-button type="default" round @click="cancelConsultOrder(orderDetail)"
        >取消问诊</van-button
      >
      <van-button type="primary" round>继续沟通</van-button>
    </div>
    <div
      class="detail-action van-hairline--top"
      v-if="orderDetail.status === OrderType.ConsultChat"
    >
      <div class="price"></div>
      <van-button type="default" round>查看处方</van-button>
      <van-button type="primary" round>继续沟通</van-button>
    </div>
    <div
      class="detail-action van-hairline--top"
      v-if="orderDetail.status === OrderType.ConsultComplete"
    >
      <div class="price">
        <p @click="showPopover = true">更多</p>
        <van-popover
          placement="top"
          v-model:show="showPopover"
          :actions="actions"
          @select="onSelect"
        />
      </div>
      <van-button type="default" round>问诊记录</van-button>
      <van-button type="primary" round>去评价</van-button>
    </div>
    <div
      class="detail-action van-hairline--top"
      v-if="orderDetail.status === OrderType.ConsultCancel"
    >
      <div class="price"></div>
      <van-button type="default" round @click="delOrder(orderDetail.id)"
        >删除订单</van-button
      >
      <van-button type="primary" round @click="router.push('/')"
        >咨询其他医生</van-button
      >
    </div>
  </div>
  <div class="consult-detail-page" v-else>
    <cp-nav-bar title="问诊详情" />
    <van-skeleton title :row="4" style="margin-top: 30px" />
    <van-skeleton title :row="4" style="margin-top: 30px" />
  </div>

  <van-action-sheet
    :closeable="false"
    :before-close="onClose"
    :close-on-popstate="false"
    v-model:show="show"
    title="选择支付方式"
  >
    <div class="pay-type">
      <p class="amount">￥{{ orderDetail?.payment }}</p>
      <van-cell-group>
        <van-cell @click="payMethod = 0" title="微信支付">
          <template #icon><cp-icon name="consult-wechat" /></template>
          <template #extra
            ><van-checkbox :checked="payMethod === 0"
          /></template>
        </van-cell>
        <van-cell @click="payMethod = 1" title="支付宝支付">
          <template #icon><cp-icon name="consult-alipay" /></template>
          <template #extra
            ><van-checkbox :checked="payMethod === 1"
          /></template>
        </van-cell>
      </van-cell-group>
      <div class="btn">
        <van-button type="primary" round block @click="payClick"
          >立即支付</van-button
        >
      </div>
    </div>
  </van-action-sheet>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { OrderType } from "@/enums";
import { useOrderCanCel } from "@/hooks/cosult";
import { deleteOrderApi, orderDetailApi, pay } from "@/services/consult";
import type { ConsultOrderItem } from "@/types/consult";
import { useRoute, useRouter } from "vue-router";
import { showConfirmDialog, showToast } from "vant";
const { loading1, cancelConsultOrder } = useOrderCanCel();
import { useClipboard } from "@vueuse/core";
const route = useRoute();
const router = useRouter();
const show = ref(false);
const orderDetail = ref<ConsultOrderItem>();
onMounted(async () => {
  const res = await orderDetailApi(
    route.path.replace("/user/cosultDetail/", "")
  );
  console.log(res);
  orderDetail.value = res.data;
});
const btnOptions = [
  { name: "待支付", val: 1 },
  { name: "待接诊", val: 2 },
  { name: "咨询中", val: 3 },
  { name: "已完成", val: 4 },
  { name: "已取消", val: 5 },
];

const showPopover = ref(false);

// 通过 actions 属性来定义菜单选项
const actions = [{ text: "查看处方" }, { text: "删除订单" }];
const onSelect = (action: any) => showToast(action.text);

// 删除订单
async function delOrder(id: string) {
  await deleteOrderApi(id);
  showToast("删除成功");
  setTimeout(() => {
    router.go(-1);
  }, 1000);
}

async function onClose() {
  return await showConfirmDialog({
    title: "关闭支付",
    message: "取消支付将无法获得医生回复，医生接诊名额有限，是否确认关闭？",
    cancelButtonText: "仍要关闭",
    confirmButtonText: "继续支付",
  })
    .then(() => {
      return false;
    })
    .catch(() => {
      // 继续支付
      return true;
    });
}

// 点击立即支付
const payMethod = ref(0);
async function payClick() {
  const res = await pay(
    payMethod.value,
    orderDetail.value?.id as string,
    "http://localhost:5173/room"
  );
  location.href = res.data.payUrl;
}
// 复制订单号
const { copy, isSupported } = useClipboard();
function onCopy() {
  if (!isSupported) return showToast("浏览器不支持复制");
  copy(orderDetail.value?.orderNo || "");
  showToast("复制成功");
}
</script>

<style lang="scss" scoped>
.consult-detail-page {
  padding: 0 0 110px 0;
}
.detail-head {
  height: 140px;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 135px;
    background: linear-gradient(
      180deg,
      rgba(44, 181, 165, 0),
      rgba(44, 181, 165, 0.2)
    );
    border-bottom-left-radius: 150px 20px;
    border-bottom-right-radius: 150px 20px;
  }
  padding: 15px;
  .text {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 3px;
    .sta {
      color: var(--cp-tag);
      font-weight: 500;
      font-size: 16px;
      &.green {
        color: var(--cp-primary);
      }
      &.orange {
        color: #f2994a;
      }
    }
    .tip {
      width: 100%;
      color: var(--cp-text3);
      margin-top: 5px;
    }
  }
  .card {
    height: 74px;
    background-color: #fff;
    border-radius: 8px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    .avatar {
      width: 38px;
      height: 38px;
    }
    .doc {
      flex: 1;
      padding-left: 15px;
      > span {
        display: block;
        font-size: 16px;
        &:last-child {
          font-size: 13px;
          color: var(--cp-text3);
        }
      }
    }
    .van-icon {
      color: var(--cp-tip);
    }
  }
}
.detail-patient {
  margin-top: 25px;
  &::after {
    content: "";
    display: block;
    height: 12px;
    background-color: var(--cp-bg);
  }
}
.detail-order {
  > h3 {
    padding: 10px 18px;
    font-weight: normal;
  }
  .copy {
    padding: 2px 10px;
    border: 1px solid var(--cp-primary);
    background-color: var(--cp-plain);
    color: var(--cp-primary);
    font-size: 12px;
    border-radius: 12px;
    margin-right: 10px;
  }
  :deep(.van-cell__title) {
    width: 70px;
    flex: none;
  }
  .price :deep(.van-cell__value) {
    font-size: 16px;
    color: var(--cp-price);
  }
}
.detail-action {
  height: 65px;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  background-color: #fff;
  justify-content: flex-end;
  padding: 0 15px;
  box-sizing: border-box;
  .price {
    flex: 1;
    > span:last-child {
      font-size: 18px;
      color: var(--cp-price);
      padding-left: 5px;
    }
  }
  .van-button {
    margin-left: 10px;
    padding-left: 17px;
    padding-right: 17px;
  }
  :deep(.van-button--default) {
    background-color: var(--cp-bg);
    color: var(--cp-text3);
  }
}
.van-cell {
  padding-left: 18px;
  padding-right: 18px;
}
.detail-time {
  position: fixed;
  left: 0;
  bottom: 65px;
  width: 100%;
  height: 44px;
  background-color: #fff7eb;
  text-align: center;
  line-height: 44px;
  font-size: 13px;
  color: #f2994a;
  .van-count-down {
    display: inline;
    color: #f2994a;
  }
}
.pay-type {
  .amount {
    padding: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
  }
  .btn {
    padding: 15px;
  }
  .van-cell {
    align-items: center;
    .cp-icon {
      margin-right: 10px;
      font-size: 18px;
    }
    .van-checkbox :deep(.van-checkbox__icon) {
      font-size: 16px;
    }
  }
}
</style>
